<template>
    <div>
        <h2 align="center">添加食谱</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right"><span style="color: red;">*</span>食谱标题</td>
                    <td><input type="text"  v-model="info.title"></td>
                </tr>
                <tr>
                    <td align="right"><span style="color: red;">*</span>食谱图片</td>
                    <td>
                        <input type="file" @change="upload">
                        <img :src="info.img" width="50" height="50" v-if="info.img!=''">
                    </td>
                </tr>
                <tr>
                    <td align="right"><span style="color: red;">*</span>食谱类型</td>
                    <td>
                        <select v-model="info.typeId">
                            <option value="">请选择</option>
                            <option v-for="i in typelist" :value="i.typeId">{{ i.typeName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="确定" class="btn btn-info" @click="add"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import router from "@/router";
import axios from "axios";
import { ref,reactive,onMounted } from "vue";

let info:any=reactive({
    title: "",
    img: "",
    typeId:""
})

let typelist:any=ref([])

onMounted(()=>{
    gettype();
})

const gettype=()=>{
    
    axios({
        url:"https://localhost:7210/api/Shop/BindType",
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        typelist.value=res.data;
    })
    .catch((err)=>{
         console.log(err);
    })
}

const upload=(e:any)=>{
    let obj = e.target.files[0];
    var f = new FormData();
    f.append('fl',obj);
     axios({
        url:"https://localhost:7210/api/Shop/Upload",
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        info.img=res.data;
    })
    .catch((err)=>{
         console.log(err);
    })
}


const add=()=>{
    if(info.title=="")
    {
        alert("标题不能为空");
        return;
    }
     if(info.img=="")
    {
        alert("图片不能为空");
        return;
    }
     if(info.typeId=="")
    {
        alert("类型不能为空");
        return;
    }
    axios({
        url:"https://localhost:7210/api/Shop/AddFood",
        method:'post',
        data:info
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
        {
            alert("添加食谱成功");
            router.push('/showfood');
            return;
        }
        else
        {
            alert("添加失败");
            return
        }
    })
    .catch((err)=>{
         console.log(err);
    })
}


</script>

<style scoped>

</style>